<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title></title>
        <!-- Bootstrap css -->
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="/static/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    {% comment %} <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css"> {% endcomment %}


        <style>

        </style>
    </head>

    <body>
        <div class="container-fluid text-center">
            <h2>遮罩层DEMO</h2>
            <!-- 按钮触发模态框 -->
            <button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal">添加主机</button>

            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
                            <h4 class="modal-title" id="myModalLabel">
                  主机添加
            </h4>
                        </div>
                        <div class="modal-body">
                            <form action="/addone/" method="post" class="form-horizontal">
                        <div class="form-group clearfix f14">
                            <label class="col-sm-3 control-label bk-lh30 pt0">服务器名：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="hostname" name="hostname" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">操作系统：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="os" name="os" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">CPU：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="cpu" name="cpu" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">内存：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="memory" name="memory" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">IP地址：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="ip" name="ip" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-sm-9 col-sm-offset-3">
                                <button type="submit" class="king-btn mr10  king-success">提交</button>
                                <button type="button" class="king-btn king-default ">取消</button>
                            </div>
                        </div>
                    </form>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal -->
            </div>
        </div>
    </body>

</html>